<!DOCTYPE html>    
<html lang="en">    
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <title>Snowfall Effect</title>    
    <style>    
        body  {    
            background-color: rgb(73, 171, 247);    
            margin: 0;    
            display: flex;    
            flex-direction: column;  /* 修改为列方向以便更好地控制居中 */  
            justify-content: center;    
            align-items: center;    
            height: 100vh;   
            text-align: center;  /* 为了确保文本居中 */  
        }  
  
        .centered-text {    
            color: rgb(8, 95, 105);    
            font-size: 100px;    
            font-family: 'Algerian', sans-serif;    
            margin-bottom: 10px; 
             text-size-adjust: 100px;/* 给雪花效果一些空间 */  
        }    
    
        .snowflake {    
            position: absolute;    
            top: -10px;    
            background: white;    
            border-radius: 50%;    
            opacity: 0.8;    
            pointer-events: none;    
        }    
    </style>    
</head>    
<body>    
    <div class="centered-text">helloharmony</div>  <!-- 新增的元素 -->  
    <canvas id="snowCanvas"></canvas>    
  
    <script>    
        const canvas = document.getElementById('snowCanvas');    
        const ctx = canvas.getContext('2d');    
        canvas.width = window.innerWidth;    
        canvas.height = window.innerHeight;    
  
        class Snowflake {    
            constructor(x, y, radius, speed, angle) {    
                this.x = x;    
                this.y = y;    
                this.radius = radius;    
                this.speed = speed;    
                this.angle = angle;    
                this.element = document.createElement('div');    
                this.element.className = 'snowflake';    
                this.element.style.width = `${this.radius * 2}px`;    
                this.element.style.height = `${this.radius * 2}px`;    
                this.element.style.left = `${this.x}px`;    
                this.element.style.top = `${this.y}px`;    
                this.element.style.position = 'absolute'; // 确保元素可以定位    
                document.body.appendChild(this.element);    
            }    
  
            update() {    
                this.x += this.speed * Math.cos(this.angle);    
                this.y += this.speed * Math.sin(this.angle) + 1;    
                this.element.style.left = `${this.x}px`;  // 修正错误的属性  
                this.element.style.top = `${this.y}px`;    
  
                if (this.y > canvas.height) {    
                    this.element.remove();    
                }    
            }    
        }    
  
        function createSnowflakes() {    
            const snowflakes = [];    
            for (let i = 0; i < 100; i++) {    
                const x = Math.random() * canvas.width;    
                const y = Math.random() * -100;    
                const radius = Math.random() * 3 + 2; // Radius between 2 and 5    
                const speed = Math.random() * 1 + 0.5; // Speed between 0.5 and 1.5    
                const angle = Math.random() * 2 * Math.PI; // Random angle    
                const snowflake = new Snowflake(x, y, radius, speed, angle);    
                snowflakes.push(snowflake);    
            }    
            return snowflakes;    
        }    
  
        function animateSnowflakes(snowflakes) {    
            snowflakes.forEach(snowflake => snowflake.update());    
            requestAnimationFrame(() => animateSnowflakes(snowflakes));    
        }    
  
        const snowflakes = createSnowflakes();    
        animateSnowflakes(snowflakes);    
  
        window.addEventListener('resize', () => {    
            canvas.width = window.innerWidth;    
            canvas.height = window.innerHeight;    
  
            // 重新定位雪花元素以适应新的窗口大小    
            document.querySelectorAll('.snowflake').forEach(snowflake => {    
                snowflake.style.left = `${Math.random() * window.innerWidth}px`;    
                snowflake.style.top = `${Math.random() * -100}px`; // 重置y位置以便它们从屏幕顶部开始    
            });    
        });    
    </script>    
</body>    
</html>